<template>
  <view class="ver-layout">
    <view v-if="studentList.length<=0" class="list-no-data">暂无数据</view>
    <view v-for="(item,index) in studentList" :key="index" class="student-item hor-layout-center"
          @click="toStudentInfo(item)">
      <image class="icon" :src="item.student_avatar?item.student_avatar:ic_teacher_student_default1"/>
      <view class="name">{{ item.student_name }}</view>
    </view>
  </view>
</template>

<script>
import {recordStudentInfo} from "@/router.js"
import {ClassStudentApi} from "@/api/recordStudy.js"

let ic_teacher_student_default1 = require("@/static/home/ic_student_default1.png")
let engine = new ClassStudentApi()
export default {
  name: "classStudentList",
  data() {
    return {
      ic_teacher_student_default1,
      classObj: {},
      studentList: [],
    }
  },
  onLoad(options) {
    this.classObj = options
    this.getClassStudents()
  },
  methods: {
    getClassStudents() {
      engine.getClassStudents(this.classObj.class_id).then(res => {
        this.studentList = res.data.student_list || []
      })
    },
    toStudentInfo(item) {
      this.$u.route({url: recordStudentInfo, params: {...item, ...this.classObj}})
    }
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.student-item {
  padding: 12px;
  margin: auto;
  margin-top: 18px;
  width: calc(100% - 24px);
  background: #FFFFFF;
  border-radius: 5px;
}

.student-item > .icon {
  width: 38px;
  height: 38px;
  border-radius: 3px;
}

.student-item > .name {
  margin-left: 6px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.list-no-data {
  color: grey;
  width: 100%;
  height: 300px;
  text-align: center;
  line-height: 300px;
}
</style>
